<template lang="html">
    <div class="diary">
        <myHeader>
            <div class="submit">
                <span @click="addEventType">确定</span>
            </div>
        </myHeader>
        <div class="content">
            <div class="form-title">
                <span>先来一个总结吧！</span>
            </div>
            <div class="form-item-container">
                <datetime v-model="diary.time" format="YYYY-MM-DD" title="时间" placeholder="请选择时间"></datetime>
            </div>
            <div class="form-item-container">
                <x-input title="天气" v-model="diary.whether"></x-input>
            </div>
            <div class="form-title">
                <span>没图你说个JB</span>
            </div>
            <div class="image-list-title">
                <span class="upload-text">上传图片</span>
                <img class="upload-icon" src="../../assets/images/zhaoxiangji.png" alt="">
            </div>
            <div class="upload-image-list-container">
                <uploadList :limit="99" @uploadOk="savePicList" :initImageList="diary.picList">
                    <div slot="imageDesc" class="desc-info" slot-scope="imageSrc" @click="toComment(imageSrc.imageSrc, imageSrc.index)">
                        <template v-if="!picInfo[imageSrc.index]">
                            <img src="../../assets/images/pinglun.png" class="comment-icon" alt="">
                            <span>说点什么</span>
                        </template>
                        <template v-if="picInfo[imageSrc.index]">
                            <span>{{picInfo[imageSrc.index]}}</span>
                        </template>
                    </div>
                </uploadList>
            </div>
            <div class="form-title">
                <span>详细说说今天的事情吧！</span>
            </div>
            <div class="form-item-container">
                <x-textarea title="记录" placeholder="记录啊" :rows="10" v-model="diary.detail"></x-textarea>
            </div>
        </div>
    </div>
</template>

<script>
import { Datetime,Group,XAddress,ChinaAddressV4Data,XInput,XTextarea } from 'vux'
import uploadList from '@/components/base/upload-list'
export default {
    components: {
        Datetime,
        Group,
        XAddress,
        XInput,
        XTextarea,
        uploadList
    },
    data(){
        return {
            diary: {
                picList: []
            },
            picInfo: []
        }
    },
    methods: {
        addEventType(){
            let reqData = JSON.parse(JSON.stringify(this.diary))
            reqData.imageList = this.diary.picList.map(item => item.id)
            delete reqData.picList
            this.$api.post('/diary/add', reqData).then(res => {
                if (res) {
                    let text = '添加成功！'
                    if (this.diary['id']) {
                        text = '修改成功！'
                    }
                    this.$vux.toast.show({
                        text: text
                    })
                    this.$router.go(-1)
                }
            })
        },
        toComment(imageSrc, index){
            sessionStorage.setItem('diaryInfo', JSON.stringify(this.diary))

            this.$router.push({
                path: '/image/detail',
                query: {
                    index: index,
                    path: imageSrc.path,
                    imageId: imageSrc.id
                }
            })
        },
        savePicList(picList){
            this.diary.picList = picList
        }
    },
    created(){
        if (this.$route.query.id) {
            this.$vux.loading.show({
                text: '加载中'
            })
            this.$api.get('/diary/get-diary-by-id', {
                id: this.$route.query.id
            }).then(res => {
                this.$vux.loading.hide()
                this.diary = res
            })
        }

        let detail = {}
        //判断是否从图片详情介绍页面过来
        if (sessionStorage.getItem('detail')) {
            detail = JSON.parse(sessionStorage.getItem('detail'))
            sessionStorage.removeItem('detail')
            // this.picInfo[detail['index']] = detail['detail']
            this.$set(this.picInfo, detail['index'], detail['detail'])
        }

        //判断缓存里面是否日记对象
        if (sessionStorage.getItem('diaryInfo')) {
            this.diary = JSON.parse(sessionStorage.getItem('diaryInfo'))
            sessionStorage.removeItem('diaryInfo')
        }
    }
}
</script>

<style lang="scss" scoped>
    .diary{
        .submit{
            font-size: .16rem;
            text-align: right;
            padding-right: .1rem;
        }
        .form-item-container{
            background: #fff;
            margin-top: .01rem;
        }
        .form-title{
            margin-top: .1rem;
            height: .38rem;
            font-size: .14rem;
            line-height: .38rem;
            padding: 0 .16rem;
            color: #9C9D9F;
        }
        .image-list-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 .16rem;
            background: #fff;
            height: .44rem;
            .upload-text{
                font-size: .14rem;
            }
            .upload-icon{
                width: .22rem;
                // height: .
            }
        }
        .upload-image-list-container{
            padding: .16rem;
            background: #fff;
            .desc-info{
                font-size: .12rem;
                line-height: .24rem;
                width: 1rem;
                height: .24rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                .comment-icon{
                    width: .18rem;
                    vertical-align: middle;
                }
            }
        }
    }
</style>
